<template>
  <view class="content">
    <nav-bar title="明细数据"></nav-bar>
    <view class="stats-container">
      <view class="stats-card">
        <!-- 添加页签切换 -->
        <view class="time-tabs">
          <view class="tab-item" :class="{ active: activeTab === 1 }" @click="changeTab(1)">提成明细</view>
          <view class="tab-item" :class="{ active: activeTab === 2 }" @click="changeTab(2)">业绩明细</view>
        </view>
        <!-- 分页控件 -->
        <uni-pagination
        :current="activeTab === 1 ? commissionPagination.page : performancePagination.page" 
        :pageSize="activeTab === 1 ? commissionPagination.limit : performancePagination.limit"
        :total="activeTab === 1 ? commissionPagination.total : performancePagination.total"
        @change="handlePageChange"
        />
        <!-- 表格内容 -->
        <view class="performance-table">
          <view class="table-header">
            <text class="header-item">日期</text>
            <text class="header-item">交易类型</text>
            <text class="header-item">金额</text>
            <text class="header-item">备注</text>
          </view>
          <view class="table-row" v-for="(item, index) in transactionList" :key="index">
            <text class="row-item">{{ formatDate(item.consumption_date) }}</text>
            <text class="row-item">{{ getTransactionType(item.transaction_type) }}</text>
            <text class="row-item" :style="{ color: item.income_type === 1 ? '#4CD964' : '#DD524D' }">
              ¥{{ item.amount_used.toFixed(2) }}
            </text>
            <text class="row-item">{{ item.description || '-' }}</text>
          </view>
        </view>

        <!-- 无数据提示 -->
        <view v-if="transactionList.length === 0" class="empty-tip">
          暂无交易记录
        </view>
      </view>
    </view>
    <view style="margin-top: 360rpx;"></view>
    <tab-bar />
  </view>
</template>

<script>
import auth from '@/utils/auth.js';
import TabBar from '@/components/tab-bar/tab-bar.vue';
import cardConsumptionsAPI from '@/utils/card_consumptions.js';
import NavBar from '@/components/nav-bar/nav-bar.vue';

export default {
  components: {
    TabBar,
    NavBar
  },
  data() {
    return {
      startDate: '',
      endDate: '',
      activeTab: 1, // 默认显示提成明细
      commissionPagination: {
        page: 1,
        limit: 10,
        total: 0
      },
      performancePagination: {
        page: 1,
        limit: 10,
        total: 0
      },
      transactionList: [],
      userId: ''
    }
  },
  onLoad(options) {
    this.userId = options.user_id
    
    // 处理URL参数
    if (options.start_date && options.end_date) {
      this.startDate = options.start_date;
      this.endDate = options.end_date;
    } else {
      // 设置默认日期范围为当前月
      const now = new Date();
      this.endDate = this.formatDateForPicker(now);
      now.setDate(1);
      this.startDate = this.formatDateForPicker(now);
    }
    console.log("----------",this.userId)
    this.fetchData();
  },
  methods: {
    formatDateForPicker(date) {
      return date.toISOString().split('T')[0];
    },
    formatDate(dateStr) {
      if (!dateStr) return '-';
      const date = new Date(dateStr);
      return `${date.getMonth() + 1}月${date.getDate()}日`;
    },
    getTransactionType(type) {
      const types = {
        1: '卡包充值',
        2: '成本支出',
        3: '现金单次消费',
        4: '卡包消费',
        5: '卡包提成',
        6: '单笔业务提成',
        7: '材料扣款-金额',
        8: '材料扣款-比例',
        9: '股东分红',
        10: '平台股东分红'
      };
      return types[type] || '未知类型';
    },
    changeTab(tab) {
      this.activeTab = tab;
      // 切换tab时重置对应分页到第一页
      if(tab === 1) {
        this.commissionPagination.page = 1;
      } else {
        this.performancePagination.page = 1;
      }
      this.fetchData();
    },
    
    handlePageChange(e) {
      if(this.activeTab === 1) {
        this.commissionPagination.page = e.current;
      } else {
        this.performancePagination.page = e.current;
      }
      this.fetchData();
    },
    
    async fetchData() {
      try {
        const params = {
          type: this.activeTab,
          page: this.activeTab === 1 ? this.commissionPagination.page : this.performancePagination.page,
          limit: this.activeTab === 1 ? this.commissionPagination.limit : this.performancePagination.limit,
          user_id: this.userId,
          start_date: this.startDate,
          end_date: this.endDate
        };
        
        const res = await cardConsumptionsAPI.getUserTransactions(params);
        this.transactionList = res.list || [];
        if(this.activeTab === 1) {
          this.commissionPagination.total = res.pagination.total || 0;
        } else {
          this.performancePagination.total = res.pagination.total || 0;
        }
      } catch (e) {
        uni.showToast({
          title: '获取交易记录失败',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style>
/* #ifdef H5 */
.content {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.content {
  padding: 30rpx;
  padding-top: 60rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  margin-top: 60rpx;
}
/* #endif */

.stats-container {
  margin-bottom: 120rpx;
}

.stats-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.stats-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  text-align: center;
  text-decoration: underline;
}

.time-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}

.separator {
  margin: 0 20rpx;
  color: #666;
}

.performance-table {
  margin-top: 30rpx;
}

.table-header,
.table-row {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.header-item,
.row-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
}

.header-item {
  font-weight: bold;
  color: #333;
}

.row-item {
  color: #666;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 40rpx 0;
  font-size: 28rpx;
}


</style>